<template>
	<h1>APP 展示组件</h1>
	<p ref="app">{{ num }}</p>
	<p>{{ num }}</p>
	<button @click="update1">update1</button>
	<p>{{ user.name }}</p>
	<button @click="update2">按钮⚠</button>
	<p>{{ user.age }}</p>
	<LIst v-model:age="user.age" />
	<FOOMe :age="user.age" @click="user.age++" />
	<!-- :age="bob.age" @ccTv="bob.age++"  -->
</template>

<script setup lang="ts">
import LIst from "./components/LIst.vue";
import FOOMe from "./components/Foome.vue";
import { ref, onMounted, watch, reactive } from "vue";

const num = ref(39);
console.log(num.value);
const app = ref<HTMLElement>();
onMounted(() => {
	console.log((app.value as HTMLElement).innerText);
});
const update1 = () => {
	num.value++;
	user.age--;
};
const update2 = () => {
	user.name = "世界第一公主殿下";
};
interface T {
	name: string;
	age: number;
}
let user = reactive<T>({
	name: "初音未来",
	age: 16,
});
watch<number>(num, (newVal, oldVal) => {
	console.log(newVal, oldVal);
});
</script>

<style></style>
